<template>
    <div>
        <el-select class="select" v-model="ca" @change="changeselect" placeholder="选择类型进行搜索">
            <el-option label="全部" value=""></el-option>
            <el-option label="进行中" value="1"></el-option>
            <el-option label="未发货" value="2"></el-option>
            <el-option label="已完成" value="4"></el-option>
            <el-option label="申请退款" value="3"></el-option>
        </el-select>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-table :data="props.row.children" stripe style="width: 100%">
                        <el-table-column prop="gname" label="商品名"> </el-table-column>
                        <el-table-column prop="gprice" label="价格"> </el-table-column>
                        <el-table-column prop="gcount" label="数量"> </el-table-column>
                        <el-table-column label="图片">
                            <template slot-scope="scope"><img :src="scope.row.gphoto" alt="" /></template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="订单编号" prop="number"> </el-table-column>
            <el-table-column label="收货人" prop="name"> </el-table-column>
            <el-table-column label="手机号" prop="mobile"> </el-table-column>
            <el-table-column label="收货地址" prop="address"> </el-table-column>
            <el-table-column label="下单日期" prop="date"> </el-table-column>
            <el-table-column label="商品总价" prop="price2"> </el-table-column>
            <el-table-column label="操作">
                <template  slot-scope="scope">
                    <el-button v-if="scope.row.status==0" @click="delivergoods(scope.row)" type="text" size="small"><i class="el-icon-s-promotion"></i>发货</el-button>
                    <el-button v-if="scope.row.status==1"  type="text" size="small"><i class="el-icon-loading"></i>进行中</el-button>
                    <el-button v-if="scope.row.status==2" @click="refund(scope.row)" type="text" size="small"><i class="el-icon-circle-close"></i>退款</el-button>
                    <el-button v-if="scope.row.status==3"  type="text" size="small"><i class="el-icon-circle-check"></i>已完成</el-button>
                    <el-button v-if="scope.row.status==4"  type="text" size="small"><i class="el-icon-circle-check"></i>已完成</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import url from '../../assets/js/baseurl.js';
export default {
    data() {
        return {
            tableData: [],
            ca:'',

        };
    },
    methods: {
        changeselect:async function (val){
            let res = await this.$http.get(`${url.lxy}/order`,{params:{id:val}})
            this.tableData = [];
            this.handledata(res.data.data)
        },
        delivergoods: async function (row) {
            let res = await this.$http.put(`${url.lxy}/order`,{orderid:row.orderid,id:1,userid:row.uid})
            if(res.data.code){
                location.reload()
                this.$message.success('发货成功')
            }else{
                this.$message.success(res.data.msg)
            }
            console.log(res);
        },
        refund:async function (row){
            let res = await this.$http.put(`${url.lxy}/order`,{orderid:row.orderid,id:4,userid:row.uid})
            console.log(res);
            if(res.data.code){
                this.$message.success('发货成功')
            }else{
                this.$message.success(res.data.msg)
            }
            console.log(res);
        },
        handledata:function (data){
             for (const i in data) {
            let j = 1;
          data[i].date = data[i].date.slice(0, 10);
            for (const xx of data[i].children) {
              data[i].gcount += parseInt(xx.gcount);
                xx.orderid = xx.orderid + `'${j}'`;
                xx.gphoto = `${url.lxy}/${JSON.parse(xx.gphoto.slice(1, xx.gphoto.length - 1)).photoUrl[0]}`;
                j++;
            }
            this.tableData.push(data[i]);
        }
        }
    },
    mounted: async function () {
        let res = await this.$http.get(`${url.lxy}/order`);
        this.handledata(res.data.data)
    }
};
</script>

<style scoped>
.select{
    margin-bottom: 10px;
}
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
img {
    width: 50px;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>